<template>
  <div v-if="commonAttr.isTouchmove" class="wb-bg" ref="bg" :style="styles" @touchmove="onTouchMove" @touchend="onTouchEnd"></div>
  <div v-else class="wb-bg" ref="bg" :style="styles"></div>
</template>
<script>
import { EventBus } from '@/store/index'
import { utils } from '@/components/utils/utils'
import { bgPositionStyle, getPxOrVw } from '@/store/utils'
import { BG_POSITION_REPEAT_TYPES } from '@/common/const'

export default {
  mixins: [utils],
  setup () {
    return {
      BG_POSITION_REPEAT_TYPES: BG_POSITION_REPEAT_TYPES,
      touched: false,
    }
  },
  created() {
    if(this.item.commonAttr.groupInjectClassName){
      this.injectDomInCompData();
    }
  },
  computed:{
  },
  mounted () {
    this.onRefreshCommonAttr()
  },
  methods: {
    onTouchMove(){
      this.touched = true;
    },
    onTouchEnd(){
      if(this.touched){
        EventBus.$emit("itemClick", {id: this.item.id, index: 0});
      }
      this.touched = false;
    },
    onRefreshCommonAttr() {
      this.convertCustomCss();
    },
    getCompDom() {
      return this.$refs.bg
    }
  },
  beforeUnmount(){
    this.item.vueContainer = null;
    if(this.isH5Edit) {
      EventBus.$off('refreshCommonAttr', this.onRefreshCommonAttr);
    }
  }
}
</script>
<style lang="scss">
.wb-bg {
  width: inherit;
  height: inherit;

  @keyframes mask{
    0% {-webkit-mask-position: 0px 0px;}
    25% {-webkit-mask-position: 619px 0px;}
    50% {-webkit-mask-position: 0px 0px;}
    75% {-webkit-mask-position: 308px 0px; -webkit-mask-size:100%;}
    100% {-webkit-mask-size: 1000%;}
  }

  .mask{
    width: inherit;
    height: inherit;
    animation: mask 5s linear infinite forwards;
  }
}
</style>